<template>
<div>
    <Card>
        <p slot="title">网站开关</p>
        <Form ref="form1" :model="model1" :rules="rules" :label-width="100">
            <FormItem v-if="model1.switch" label="" prop="reason">
                <p>*若关闭网站，请注明原因</p>
                <Input v-model="model1.reason" type="textarea" :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入系统维护原因"></Input>
                <p style="color:red">注意：文本框内填充的内容，将出现在下文“因为”的后面，在系统关闭后展示给用户：</p>
                <p>因为{{model1.reason}}，我们不得不离开一段时间。</p>
            </FormItem>
            <FormItem v-if="model1.switch" label="" prop="date">
                <p>*若关闭网站，请设置网站预计开启日期</p>
                <DatePicker v-model="model1.date" type="date" placeholder="请选择预计系统开启日期" style="width: 200px"></DatePicker>
            </FormItem>
            <FormItem label="" prop="switch">
                <span>系统开关：</span>
                <i-switch :disabled="disabled" v-model="model1.switch" @on-change="change1" v-if="checkPermission('111231')"></i-switch>
                <span>目前状态：{{ model1.switch ? "已开启" : "已关闭" }}</span>
            </FormItem>
        </Form>
    </Card>
</div>
</template>
<script>
import parent from '../Parent';
    export default {
        extends:parent,
        data () {
            return {
                model1: {
                    disabled: false,
                    switch: true,
                    reason: "",
                    date:""
                },
                rules: {
                    reason: [
                        { required:true, message: '内容不能为空', trigger: 'change' }
                    ],
                    data: [
                        { required:true, message:'日期不能为空', trigger:'change' }
                    ]
                }
            }  
        },
        computed: {
            disabled(){
                return this.model1.switch && (this.model1.reason.trim() == "" || this.model1.date == "");
            }
        },
        methods: {
            change1 (status) {
                this.model1.switch = !status;
                if(status) {
                    this.api.post("free_value/set", { 
                        keyvalues: {
                            "website.is_maintain": "0"
                        }
                    }, res => {
                        this.model1.switch = status;
                        this.model1.disabled = true;
                    });
                }else {
                    this.$refs.form1.validate( valid => {
                        if(valid) {
                            this.api.post("free_value/set", { 
                                keyvalues: {
                                    "website.is_maintain": "1", 
                                    "website.maintain_reason": this.model1.reason ,
                                    "website.maintain_time":Date.parse(this.model1.date)
                                }
                            }, res => {
                                this.model1.switch = status;
                            });
                        }
                    });
                }
            }
        },
        created() {
            this.api.post("free_value/get_website", null, res => {
                this.model1.switch = res.data.is_maintain.value == "0";
                this.model1.disabled = this.model1.switch;
            });
        }
    }
</script>